<template>
  <div>
    <!-- 首页轮播图 -->
    <Carousel></Carousel>
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <!-- 医院结构区域 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level />
        <!-- 地区子组件 -->
        <Region />
        <!-- 医院列表子组件 -->
         <div class="hospital">
            <Card class="item" v-for="item in hasHospitalArr" :key="item.id" :hospitalInfo="item" />
            <!-- 分页器 -->
            <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              :background="true"
              layout="prev, pager, next, jumper,->,sizes,total"
              :total="total"
              @current-change="currentChange"
              @size-change="sizeChange"
            />
         </div>
      </el-col>
      <el-col :span="4">
        右侧
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { reqHospital } from '../../api/home'
// 引入首页轮播图组件
import Carousel from './carousel/index.vue'
// 引入首页搜索的组件
import Search from "./search/index.vue"
// 引入首页等级的组件
import Level from "./level/index.vue"
// 引入首页地区的组件
import Region from "./region/index.vue"
// 引入医院列表组件
import Card from "./card/index.vue"
// import request from '@/utils/request'

// 分页器需要的时间
import { ref, onMounted } from 'vue'

let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)

// 分页器页码发生变化时候回调
const currentChange = () => {
  getHospitalList();
};
// 分页器下拉菜单发生变化的时候会触发
const sizeChange = () => {
  // 当前页码归第一页
  pageNo.value = 1;
  // 再次发请求获取医院的数据
  getHospitalList();
};
// 存储已有的医院的数据
let hasHospitalArr = ref([])

const getHospitalList = async () => {
  // 请求医院列表
  const result: any = await reqHospital(pageNo.value, pageSize.value)
  console.log(result)
  hasHospitalArr.value = result.data.content
  total.value = result.data.totalElements
}
// 组件挂载完毕，发一次请求
onMounted(() => {
  // 测试axios请求
  // request.get('/hosp/hospital/1/10').then(res => {
  //   console.log('请求回来了', res)
  // })
  getHospitalList()
})



</script>
<script lang="ts">
export default {
  name: "Home"
}
</script>
<style scoped lang="scss">
img {
  width: 100%;
  height: 350px;
}
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>